<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/" class="mb">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a>商品管理</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <!-- 添加分类 -->
      <el-button type="primary" @click="add">添加分类</el-button>

      <!-- 数据表格 -->
      <div>
        <el-table :data="list" style="width: 100%;margin-bottom: 20px;" row-key="cat_id" border>
          <el-table-column type="index" label="#" sortable width="180"></el-table-column>
          <el-table-column prop="cat_name" label="分类名称" sortable width="180"></el-table-column>
          <el-table-column prop="name" label="是否有效" sortable width="180">
            <template slot-scope="scope">
              <i v-if="!scope.row.cat_deleted" class="el-icon-success"></i>
              <i v-else class="el-icon-error"></i>
            </template>
          </el-table-column>
          <el-table-column label="排序">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.cat_level==0">一级</el-tag>
              <el-tag v-if="scope.row.cat_level==1" type="success">二级</el-tag>
              <el-tag v-if="scope.row.cat_level==2" type="danger">三级</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" @click="edit(scope.row)" icon="el-icon-edit" size="mini">编译</el-button>
              <el-button type="danger" @click="dele(scope.row.cat_id)" icon="el-icon-delete" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="block">
          <!-- <span class="demonstration">完整功能</span> -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[5, 10, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
        <!-- 添加分类 -->
        <el-dialog title="添加商品分类" :visible.sync="isAddUser">
          <el-form ref="form" :model="addData" :rules="addUserDiaRules">
            <el-form-item label="分类名称" prop="name" :label-width="formLabelWidth">
              <el-input autocomplete="off" v-model="addData.cat_name"></el-input>
            </el-form-item>
            <el-form-item label="父级分类" prop="name" :label-width="formLabelWidth">
              <el-cascader ref="cascaderRef" v-model="value" :options="list" :props="expand" @change="handleChange"></el-cascader>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="isAddUser = false">取 消</el-button>
            <el-button type="primary" @click="addHandel">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 编译弹框 -->
        <el-dialog title="修改分类" :visible.sync="dialog">
          <el-form ref="form" :model="addData" :rules="addUserDiaRules">
            <el-form-item label="分类名称" prop="name" :label-width="formLabelWidth">
              <el-input autocomplete="off" v-model="lists.cat_name"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialog = false">取 消</el-button>
            <el-button type="primary" @click="bianHandel">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      expand: {
        expandTrigger: "gover",
        label: "cat_name",
        value: "cat_id",
        children: "children",
        checkStrictly: true
      },
      lists:{},

      list: [],
      id: "",
      dialog: false,
      name: "",
      value: "",
      total: "",
      // addDatas:'',
      addData: {
        cat_name: "",
        cat_pid: 0,
        cat_level: 0
      },

      formLabelWidth: "120px",
      isAddUser: false,
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 5
      },
      addUserDiaRules: {
        username: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
          { min: 2, max: 10, message: "长度在2 到 10 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(val);

      this.queryInfo.pagesize = val;
      this.getlist();
    },
    handleCurrentChange(val) {
      this.queryInfo.pagenum = val;
      this.getlist();
    },
    handleChange(value) {
      console.log(value);
      this.$refs.cascaderRef.dropDownVisible = false;
    },
    // 添加分类弹窗
    add() {
      this.isAddUser = true;
    },
    // 提交
    async addHandel() {
      if (this.value.length > 0) {
        this.addData.cat_pid = this.value[this.value.length - 1];
        this.addData.cat_level = this.value.length;
      } else {
        this.addData.cat_pid = 0;
        this.addData.cat_level = 0;
      }
      let res = await this.$axios.post("categories", this.addData);
      console.log("分类添加成功", res);

      this.getlist();
      this.isAddUser = false;
    },

    // 编译
    edit(row) {
      this.dialog = true;
      this.id = row.cat_id;
      console.log('编译',row.cat_name);
      this.lists=row
      // this.addData.cat_name = row.cat_name;
    },
    // 确定编译
    bianHandel() {
      console.log(this.id);
      this.$axios.put(`categories/${this.id}`,this.lists).then(res=>{
        console.log(res);
        
      })
      this.dialog = false;
      // this.getlist();
    },
    // 删除
    async dele(id) {
      console.log(16);

      console.log(id);
      const res = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(error => error);

      if (res !== "confirm") {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      } else {
        await this.$axios.delete(`categories/${id}`);
        this.$message({
          type: "success",
          message: "删除成功!"
        });
        this.getlist();
      }
    },
    //   获取数据
    async getlist() {
      let res = await this.$axios.get(`/categories`, {
        params: this.queryInfo
      });

      // console.log('商品分类',res);
      this.list = res.data.data.result;

      // 分页
      this.total = res.data.data.total;
      // console.log(this.total);
      console.log(this.list);
    }
  },
  mounted() {
    this.getlist();
  }
};
</script>

<style lang="scss" scoped>

.mb {
  margin-bottom: 20px;
}
.el-icon-success {
  // background: rgb(0, 81, 255);
  color: rgb(153, 204, 106);
}
.el-icon-error {
  color: red;
}
</style>